<template>
  <div class="chart-line-thread-root" ref="ChartLineThreadRef"></div>
</template>

<script setup lang="ts">
import { ref, onMounted, inject } from "vue";
import { getThreadLineApi } from "@/api/guardcat";
import * as jvmTheme from './JvmTheme';
// echarts
import * as echartTheme from '@/assets/styles/xz/echartTheme';
import * as echarts from 'echarts/core';
import { GridComponent, TooltipComponent, DataZoomComponent, LegendComponent } from 'echarts/components';
import { LineChart } from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
echarts.use([GridComponent, TooltipComponent, DataZoomComponent, LegendComponent, LineChart, UniversalTransition, CanvasRenderer]);

// -------------------- inject
const currentMachine: any = inject('currentMachine');

// -------------------- data
const ChartLineThreadRef = ref<any>(null);
let chartLineThread: any;
let chartData = {
  x: [],
  dtc: [],
  tstc: [],
  ptc: [],
  tc: []
}

const getJvmThreadLine = () => {
  getThreadLineApi({ machineId: currentMachine.value.machineId }).then(resp => {
    chartData.x = resp.data.x;
    chartData.dtc = resp.data.dtc;
    chartData.tstc = resp.data.tstc;
    chartData.ptc = resp.data.ptc;
    chartData.tc = resp.data.tc;
    renderChart();
  });
}

const renderChart = () => {
  chartLineThread.setOption({
    title: { right: 0, text: '线程折线图', textStyle: echartTheme.title().textStyle },
    legend: echartTheme.legend(),
    tooltip: echartTheme.tooltip(),
    grid: [
      { left: 30, right: 20, top: 30, height: '43%', containLabel: true },
      { left: 11, right: 20, bottom: 20, height: '43%', containLabel: true },
    ],
    xAxis: [
      { type: 'category', data: chartData.x.map((item: any) => item.replaceAll(' ', '\n')) },
      { gridIndex: 1, type: 'category', data: chartData.x.map((item: any) => item.replaceAll(' ', '\n')) },
    ],
    yAxis: [
      { splitLine: { lineStyle: { color: [echartTheme.common().axisLineColor] } } },
      { gridIndex: 1, splitLine: { lineStyle: { color: [echartTheme.common().axisLineColor] } } }
    ],
    // 所有图表共用同一个 axis 坐标系X轴的选中位置
    axisPointer: { link: [{ xAxisIndex: 'all' }] },
    series: [
      {
        z: 3,
        id: "当前活动线程",
        name: '当前活动线程',
        type: 'line',
        showSymbol: false,
        sampling: 'lttb',
        data: chartData.tc,
        lineStyle: { width: 2 },
        itemStyle: { color: jvmTheme.clr().heap },
        areaStyle: { color: jvmTheme.clr().heapLine }
      },
      {
        z: 2,
        id: "守护线程",
        name: '守护线程',
        type: 'line',
        showSymbol: false,
        sampling: 'lttb',
        data: chartData.dtc,
        lineStyle: { width: 1 },
        itemStyle: { color: jvmTheme.clr().metaspace },
        areaStyle: { color: jvmTheme.clr().metaspace }
      },
      {
        z: 1,
        xAxisIndex: 1,
        yAxisIndex: 1,
        id: "线程总数",
        name: '历史线程总数',
        type: 'line',
        showSymbol: false,
        sampling: 'lttb',
        data: chartData.tstc,
        lineStyle: { width: 1 },
        itemStyle: { color: jvmTheme.clr().red },
        areaStyle: { color: jvmTheme.clr().red }
      },
      {
        z: 2,
        xAxisIndex: 1,
        yAxisIndex: 1,
        id: "峰值线程",
        name: '峰值线程',
        type: 'line',
        showSymbol: false,
        sampling: 'lttb',
        data: chartData.ptc,
        lineStyle: { width: 1 },
        itemStyle: { color: jvmTheme.clr().oldLine },
        areaStyle: { color: jvmTheme.clr().old }
      }
    ]
  });
}

const windowResize = () => {
  chartLineThread.resize();
}

const init = () => {
  chartLineThread = echarts.init(ChartLineThreadRef.value);
}

onMounted(() => {
  init();
  windowResize();
})

defineExpose({
  windowResize, getJvmThreadLine
})
</script>

<style scoped lang="scss">
.chart-line-thread-root {
  @include box(100%, 100%);
}
</style>